﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>

<div class="layui-container-fluid">
    <!-- 查询条件 -->
    <div class="layui-card">
        <div class="layui-card-header">查询条件</div>
        <div class="layui-card-body">
            <form class="layui-form layui-row" id="searchForm">
                <div class="layui-col-md3">
                    <label class="layui-form-label">入库单编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="lnboundCode" placeholder="请输入入库单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">入库单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="lnboundName" placeholder="请输入入库单名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">供应商名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="vendorName" placeholder="请输入供应商名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="procurementNumber" placeholder="请输入订单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">入库日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="lnboundDate" placeholder="请选择入库日期" class="layui-input" id="lnboundDate">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <button type="button" class="layui-btn" id="searchBtn">查询</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn" id="addBtn">新增</button>
                <button type="button" class="layui-btn layui-btn-normal" id="editBtn">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger" id="deleteBtn">删除</button>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 新增/编辑弹窗 -->
<div id="addEditDialog" class="layui-hide">
    <form class="layui-form" id="addEditForm" lay-filter="addEditForm" style="padding: 20px;">
        <input type="hidden" name="id" />
        
        <div class="layui-form-item">
            <label class="layui-form-label">入库单编号 <span class="layui-required">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="lnboundCode" required lay-verify="required" placeholder="自动生成" class="layui-input" readonly>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">入库单名称 <span class="layui-required">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="lnboundName" required lay-verify="required" placeholder="请输入入库单名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">供应商名称 <span class="layui-required">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="vendorName" required lay-verify="required" placeholder="请输入供应商名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">入库日期 <span class="layui-required">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="lnboundDate" required lay-verify="required" placeholder="请选择入库日期" class="layui-input" id="formLnboundDate">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">采购订单号</label>
            <div class="layui-input-block">
                <input type="text" name="procurementNumber" placeholder="请输入采购订单号" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">单据总额</label>
            <div class="layui-input-block">
                <input type="number" name="totalAmount" placeholder="请输入单据总额" class="layui-input" step="0.01">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">单据状态</label>
            <div class="layui-input-block">
                <select name="documentStatus" lay-verify="">
                    <option value="">请选择</option>
                    <option value="草稿">草稿</option>
                    <option value="待审核">待审核</option>
                    <option value="已完成">已完成</option>
                    <option value="已取消">已取消</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            </div>
        </div>
    </form>
</div>

<script>
layui.use(['table', 'form', 'layer', 'laydate'], function() {
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var $ = layui.$;

    // 初始化日期选择器
    laydate.render({
        elem: '#lnboundDate',
        range: '~'
    });

    laydate.render({
        elem: '#formLnboundDate'
    });

    // 初始化表格
    var tableIns = table.render({
        elem: '#dataTable',
        url: '/api/Procurementwarehousing/GetPagedList',
        method: 'POST',
        contentType: 'application/json',
        where: getQueryParams(),
        request: {
            pageName: 'page',
            limitName: 'limit'
        },
        parseData: function(res) {
            console.log('API返回数据:', res);
            return {
                "code": res.success ? 0 : 1,
                "msg": res.message || "",
                "count": res.pageCount || 0,
                "data": res.listDate || []
            };
        },
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', hide: true},
            {field: 'lnboundCode', title: '入库单编号', width: 180},
            {field: 'lnboundName', title: '入库单名称', width: 200},
            {field: 'vendorName', title: '供应商名称', width: 180},
            {field: 'lnboundDate', title: '入库日期', width: 120, templet: function(d) {
                return formatDate(d.lnboundDate);
            }},
            {field: 'procurementNumber', title: '采购订单号', width: 150},
            {field: 'totalAmount', title: '单据总额', width: 120},
            {field: 'documentStatus', title: '单据状态', width: 100}
        ]],
        page: true
    });

    // 获取查询参数
    function getQueryParams() {
        var formData = form.val('searchForm');
        console.log('表单数据:', formData);
        
        var params = {
            lnboundCode: formData.lnboundCode || '',
            lnboundName: formData.lnboundName || '',
            vendorName: formData.vendorName || '',
            procurementNumber: formData.procurementNumber || ''
        };

        // 处理日期范围
        if (formData.lnboundDate && formData.lnboundDate.trim()) {
            var dates = formData.lnboundDate.split(' ~ ');
            if (dates.length === 2) {
                params.lnboundDateStart = dates[0].trim();
                params.lnboundDateEnd = dates[1].trim();
            } else {
                // 单个日期，设为开始和结束日期相同
                params.lnboundDateStart = formData.lnboundDate.trim();
                params.lnboundDateEnd = formData.lnboundDate.trim();
            }
        }

        console.log('查询参数:', params);
        return params;
    }

    // 格式化日期
    function formatDate(dateString) {
        if (!dateString) return '';
        var date = new Date(dateString);
        return date.getFullYear() + '-' + 
               String(date.getMonth() + 1).padStart(2, '0') + '-' + 
               String(date.getDate()).padStart(2, '0');
    }

    // 查询按钮事件
    $('#searchBtn').on('click', function() {
        tableIns.reload({
            where: getQueryParams(),
            page: {
                curr: 1
            }
        });
    });

    // 重置按钮事件
    $('#resetBtn').on('click', function() {
        // 清空表单
        $('#searchForm')[0].reset();
        // 重新加载表格，使用空查询条件
        tableIns.reload({
            where: {},
            page: {
                curr: 1
            }
        });
    });

    // 新增按钮事件
    $('#addBtn').on('click', function() {
        layer.open({
            type: 2,
            title: '新增采购入库',
            area: ['900px', '70%'],
            content: '/ProcurementwarehousingPage/ProcurementwarehousingAdd',
            success: function(layero, index) {
                // 可以在这里设置回调
            },
            end: function() {
                // 关闭后刷新表格
                tableIns.reload();
            }
        });
    });



    // 编辑按钮事件
    $('#editBtn').on('click', function() {
        var checkStatus = table.checkStatus('dataTable');
        var data = checkStatus.data;
        if (data.length !== 1) {
            layer.msg('请选择一条记录进行编辑');
            return;
        }
        layer.open({
            type: 2,
            title: '编辑采购入库',
            area: ['900px', '70%'],
            content: '/ProcurementwarehousingPage/ProcurementwarehousingEdit?id=' + data[0].id,
            success: function(layero, index) {
                // 可以在这里设置回调
            },
            end: function() {
                // 关闭后刷新表格
                tableIns.reload();
            }
        });
    });

    // 删除按钮事件
    $('#deleteBtn').on('click', function() {
        var checkStatus = table.checkStatus('dataTable');
        var data = checkStatus.data;
        if (data.length === 0) {
            layer.msg('请选择要删除的记录');
            return;
        }
        layer.confirm('确定要删除选中的记录吗？', function(index) {
            var ids = data.map(function(item) { return item.id; });
            $.ajax({
                url: '/api/Procurementwarehousing/Delete',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(ids),
                success: function(res) {
                    if (res.success) {
                        layer.msg('删除成功');
                        tableIns.reload();
                    } else {
                        layer.msg('删除失败：' + res.message);
                    }
                },
                error: function() {
                    layer.msg('网络异常，请稍后重试');
                }
            });
            layer.close(index);
        });
    });
});
</script>

